<script setup lang="ts">
import { ref, reactive } from 'vue'
import * as promotionCenterApi from '@/api/promotionCenter'
import { message } from 'ant-design-vue'
import ServiceModal from '../../components/service-modal/index.vue'

import q4 from '@/assets/q4.jpg'
import q5 from '@/assets/q5.jpg'
import q6 from '@/assets/q6.jpg'
import q7 from '@/assets/q7.jpg'
import q8 from '@/assets/q8.jpg'
import q9 from '@/assets/q9.jpg'
import q10 from '@/assets/q10.jpg'

interface DataItem {
  id: number
  img: string
  title: string
  desc: string
  price: string
  inventory: string | number
  loading: boolean
}
const dataSource = ref<Array<DataItem>>([
  // {
  //   id: 1,
  //   img: q4,
  //   title: '瑞幸咖啡原价32以内通兑券',
  //   desc: '无论您钟情拿铁的丝滑、美式的纯粹、还是卡布奇诺的浪漫，均可兑换',
  //   price: '100积分',
  //   inventory: '51',
  //   loading: false,
  // },
  // {
  //   id: 2,
  //   img: q5,
  //   title: '欢喜快递cps小程序系统一年使用体验',
  //   desc: '配置您自己的快递平台，寄快递、寄大件、同城跑腿，推广即赚佣',
  //   price: '120积分',
  //   inventory: '71',
  //   loading: false,
  // },
  // {
  //   id: 3,
  //   img: q6,
  //   title: '电影票微信小程序系统一年使用体验',
  //   desc: '自定义折扣，连锁院线快速出票',
  //   price: '120积分',
  //   inventory: '42',
  //   loading: false,
  // },
  // {
  //   id: 4,
  //   img: q7,
  //   title: '票达人系统一年使用授权（微信/闲鱼）',
  //   desc: '多平台多行业流程自动化工具，让您的运营效率倍增',
  //   price: '200积分',
  //   inventory: '26',
  //   loading: false,
  // },
  // {
  //   id: 5,
  //   img: q8,
  //   title: '全国万达23D通兑券',
  //   desc: '可兑换全国直营万达发行价小于35元的电影票兑换码一张',
  //   price: '35积分',
  //   inventory: '580',
  //   loading: false,
  // },
  // {
  //   id: 6,
  //   img: q9,
  //   title: '电影票微信公众号一年使用体验',
  //   desc: '自定义折扣、分销提成、连锁院线快速出票',
  //   price: '800积分',
  //   inventory: '23',
  //   loading: false,
  // },
  // {
  //   id: 7,
  //   img: q10,
  //   title: '美团外卖5元代金券',
  //   desc: '适用于美团app，仅点外卖可用，最终权益以官方权益使用说明为准',
  //   price: '25积分',
  //   inventory: '462',
  //   loading: false,
  // },
])
const ServiceModalRef = ref()

const cost = async (item: any) => {
  // ServiceModalRef.value.setVisible(true)
  // message.info('暂不支持自助兑换购买，请联系平台客服！')
  ItemInfo.value = item
  ItemInfo.value.loading = true
  contVisible.value = true
}

const getList = async () => {
  try {
    let {
      state,
      data,
      message: msg,
    } = await promotionCenterApi.getPutawayPointProductList({ currentPage: 1, pageSize: 100 })
    if (state === 200) {
      data.list.forEach(item => {
        if (!item.hasOwnProperty('inventory')) {
          item.inventory = 0
        }
      })
      dataSource.value = data.list
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

onMounted(() => {
  getList()
})

defineExpose({
  getList,
})
const ItemInfo = ref({})
const contVisible = ref(false)
const handleOk = async () => {
  try {
    let { state, message: msg } = await promotionCenterApi.exchangePointProduct({
      id: ItemInfo.value.id,
    })
    if (state === 200) {
      message.success('兑换结果，请查看兑换记录')
      contVisible.value = false
    } else {
      message.error(msg)
      setTimeout(() => {
        contVisible.value = false
      }, 1000)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
  ItemInfo.value.loading = false
}
const handleCancel = () => {
  ItemInfo.value.loading = false
}
</script>

<template>
  <ServiceModal ref="ServiceModalRef"></ServiceModal>

  <a-modal v-model:open="contVisible" title="提示" @cancel="handleCancel" @ok="handleOk">
    <p>自动兑换发货功能由星驰卡券系统提供</p>
  </a-modal>

  <a-row :gutter="[24, 20]" class="div-card">
    <a-col v-for="(item, index) in dataSource" :key="index">
      <a-card hoverable class="cardItem">
        <template #cover>
          <img alt="example" :src="item.img" />
        </template>
        <a-card-meta
          style="position: relative; top: -10px"
          :title="item.title"
          :description="item.desc"
        ></a-card-meta>
        <div class="buy">
          <span style="width: 175px; display: inline-block">
            {{ item.price }}积分/个（剩余{{ item.inventory || 0 }}个）
          </span>
          <div class="buy-button">
            <a-button
              type="primary"
              :loading="item.loading"
              ghost
              @click="cost(item)"
              :disabled="item.inventory == 0"
            >
              兑换
            </a-button>
          </div>
        </div>
      </a-card>
    </a-col>
  </a-row>
</template>

<style lang="less" scoped>
.project-list {
  cursor: pointer;
  display: flex;

  .project-card-grid {
    margin: 5px;
  }
}

.div-card {
  padding: 5px;

  .cardItem {
    width: 300px;
    // height: 300px;

    min-height: 310px;
    position: relative;
  }
}

.buy {
  height: 20px;
  width: 85%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // flex-direction: column;
  position: absolute;
  bottom: 20px;
  .buy-button {
    margin-left: 15px;
  }
}
</style>
